import React, { Component } from "react";
import { NavBar, Icon, Carousel, Tabs, Badge, Toast } from "antd-mobile";
import { getGoodsDetailHandle } from "../api";
import {connect} from 'react-redux'
const tabs = [
  { title: <Badge text={""}>商品参数</Badge> },
  { title: <Badge text={""}>商品详情</Badge> },
  { title: <Badge dot={false}>评分评价</Badge> },
  { title: <Badge>相关推荐</Badge> }
];

export class goodsDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: localStorage.getItem("token"),
      goodsDetailCarouselList: [],
      detail: "",
      goods_cs: "",
      detail_img: "",
      goods_price: "",
      goods_image: "",
      goods_name: "",
      goods_advword: "",
      comments: "",
      goods_tag: [],
      productlist: "",
      is_fav: "",
      goods_id: '',
      spec_image: '',
      num:1,
      selected: false,
      goods_specification: '',
    };
  }
  // 加入购物车
  handlAddCart= () => {
    console.log('加入购物车')
    let goodsobj = {
      img: this.state.spec_image,//商品相片
      price: this.state.goods_price,//价格
      id: this.state.goods_id,//id
      title: this.state.goods_name,//商品名称
      num:1,// 购买的数量
      selectStatus:true, // 选中状态
    }
    this.props.addToCart(goodsobj)
  }
  // 立即购买
  handlBuy=()=> {
    console.log('立即购买')
    this.props.history.push('/cart')
  }
  // 提示
  showToast(msg) {
    Toast.info(msg + "功能尚未开放!", 2);
  }
  // 商品详情
  async getGoodsDetailHandle() {
    let data = {
      id: this.props.match.params.id,
      token: this.state.token
    };
    let res = await getGoodsDetailHandle(data);
    console.log(res.data,'商品详情')
    if (res.data.is_fav === 1) {
      this.state.selected = true;
    }
    this.setState({
      goodsDetailCarouselList: res.data.goods_image_mobile,
      detail: res.data,
      goods_cs: res.data.goods_info.goods_cs,
      detail_img: res.data.goods_info.mobile_body,

      goods_advword: res.data.goods_info.goods_advword,
      comments: res.data.comments,
      goods_tag: res.data.goods_info.biaoqian,
      productlist: res.data.goods_info.is_combo,
      is_fav: res.data.is_fav,
      spec_image: res.data.spec_image[0],//商品相片
      goods_price: res.data.goods_info.goods_price,//价格
      goods_id: res.data.goods_info.goods_id,//id
      goods_name: res.data.goods_info.goods_name,//商品名称
      num:1,// 购买的数量
      selectStatus:true, // 选中状态
      goods_specification: "12g*20条/盒"
    });
  }
  componentDidMount() {
    this.getGoodsDetailHandle();
  }
  render() {
    return (
      <div className="goods-details">
        {/* 导航栏 */}
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={() => this.props.history.go(-1)}
        >
          商品详情}
        </NavBar>
        {/* 详情轮播图 */}
        <Carousel autoplay infinite>
          {this.state.goodsDetailCarouselList.map((val, index) => (
            <div
              key={index}
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight
              }}
            >
              <img
                src={val}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
                onLoad={() => {
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "auto" });
                }}
              />
            </div>
          ))}
        </Carousel>

        <div className="top">
          <div className="price">¥{this.state.goods_price}</div>
          <div className="title">{this.state.goods_name}</div>
          <div className="spe">
            <div className="spe_goods_specification">
              <div className="goods_specification">
                {this.state.goods_specification}
              </div>
              <div className="operation">
                <div
                  className="collect"
                  onClick={() => {
                    this.showToast("收藏");
                  }}
                >
                  收藏{" "}
                </div>
                <div
                  className="share"
                  onClick={() => {
                    this.showToast("分享");
                  }}
                >
                  分享
                </div>
              </div>
            </div>
            <div className="detail_info">
              {this.state.detail.intro}
              {this.state.goods_advword}
            </div>
            <div className="intro">
              <div className="tag">
                {this.state.goods_tag.map(v => (
                  <div key={v}>{v}</div>
                ))}
              </div>
            </div>
          </div>

          <Tabs
            tabs={tabs}
            initialPage={1}
            onChange={(tab, index) => {
              console.log("onChange", index, tab);
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "auto",
                backgroundColor: "#fff"
              }}
            >
              {/* 如果渲染的内容是带有html标签的字符串，需要使用dangerouslySetInnerHTML属性，这个属性中需要放一个对象，这个对象有一个 __html属性 */}
              <div style={{ minHeight: "100px" }}>
                <p dangerouslySetInnerHTML={{ __html: this.state.goods_cs }}></p>
              </div>
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "auto",
                backgroundColor: "#fff"
              }}
            >
              <div style={{ minHeight: "100px" }}>
              <p
                dangerouslySetInnerHTML={{ __html: this.state.detail_img }}
                ></p>
                </div>
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "auto",
                backgroundColor: "#fff"
              }}
            >
              <div style={{ minHeight: "100px", paddingTop: " 50px" }}>
                {this.state.comments.length === 0 ? (
                  <div>暂无评论！</div>
                ) : (
                  <div>暂无评论！</div>
                )}
              </div>
            </div>

            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "auto",
                backgroundColor: "#fff"
              }}
            >
              <div style={{ minHeight: "100px", paddingTop: " 50px" }}>
                <div>暂无推荐!!</div>
              </div>
            </div>
          </Tabs>

          {/* 底部 */}
          <div className="goods-footer">
            <div className="goods-footer-item contact">
              <span className="iconfont iconkefu1"></span>联系客服<span></span>
            </div>
            <div className="goods-footer-item cart">
              <span className="iconfont icongouwuche1"></span>
              <span>
                购物车
            <span className="badge">{this.props.totalNum}</span>
              </span>
            </div>
            <div onClick={this.handlAddCart} className="goods-footer-item add">
              <span>加入购物车</span>
            </div>
            <div onClick={this.handlBuy} className="goods-footer-item buy">
              <span>立即购买</span>
            </div>
          </div>
        </div>
        <style jsx>{`
          .goods-details {
            margin-bottom: 50px;
            .top {
              padding: 10px;
              background: #fff;
              .price {
                color: red;
                font-size: 18px;
              }
              .title {
                font-size: 18px;
                padding-top: 8px;
              }
              .spe {
                font-size: 16px;
                .spe_goods_specification {
                  display: flex;
                  border-bottom: 1px solid #ccc;
                  padding-bottom: 5px;
                  .goods_specification {
                    padding: 8px 0px;
                    flex: 6;
                  }
                  .operation {
                    display: flex;
                    flex: 2;
                    .collect,
                    .share {
                      margin-left: 10px;
                      font-size: 14px;
                      color: #03a34b;
                    }
                  }
                }
              }
              .detail_info {
                padding-top: 10px;
                font-size: 16px;
              }
              .intro {
                font-size: 12px;
                color: #f0863b;
                .tag {
                  display: flex;
                  > div {
                    padding-top: 10px;
                    padding-right: 15px;
                  }
                }
              }
            }
            .goods-footer {
              z-index: 999;
              display: flex;
              position: fixed;
              bottom: 0;
              left: 0;
              height: 50px;
              width: 100%;
              border-top: 1px solid #e7e7e7;
              background-color: #fff;
              .goods-footer-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
              .contact,
              .cart {
                width: 40%;
                font-size: 12px;
                position: relative;
              }

              .badge {
                position: absolute;
                top: 3%;
                left: 50%;
                width: 14px;
                height: 14px;
                border-radius: 7px;
                background-color: #e4393c;
                text-align: center;
                line-height: 14px;
                color: white;
              }

              .add,
              .buy {
                width: 60%;
                color: white;
                & > span {
                  font-size: 18px;
                }
              }
              .add {
                background-color: #ff976a;
              }
              .buy {
                background-color: #ff4444;
              }
            }
          }
          .comment {
            .member_avatar_box {
              width: 50px;
              height: 50px;
              .member_avatar {
                widht: 100%;
                display: block;
              }
              .member_name {
                font-size: 14px;
                width: 50px;
                height: 20px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        `}</style>
      </div>
    );
  }
}
const getTotalNum=(list)=>{
  let totalNum=0
  list.map(v => {
    totalNum+= v.num
  })
  return totalNum
}
// 1.4 创建映射state函数
const mapStateToProps = (state) => {
  return {
    totalNum: getTotalNum(state.cartModule)
  }
}

// 1.5 创建映射派发action的函数
const mapActionToProps = (dispatch) => {
  return {
    addToCart: (goodsobj) => {
      console.log(goodsobj,'goodsobj')
      dispatch({type: 'ADDTOCART', payload: goodsobj})
    }
  }
}
export default connect(mapStateToProps,mapActionToProps)(goodsDetails);
